<template>
    <div class="content" :style="contentStyle">
        <div class="bgOpacity"></div>
        <div class="question-contain">
<!--            上面选项-->
            <div class="article-options" v-if="isMatchedShow && !isFinished">
                <v-touch class="article" v-for="(article,index) in item.articles" :key="index"
                         :style="articleStyle(index)"
                @tap="articleTouch(article,$event)" :class="article.isLos ? 'los' : articleLosShow ? 'losShow' : ''">
                    <img :src="article.imageUrl" alt="">
<!--                    <Point :style="pointStyle" v-if="!operated"/>-->
                </v-touch>
            </div>
<!--            一个提示框-->
            <div :class="!isMatchedShow || isFinished? 'articles-contain' : ''">
                <div class="article-finish suc" v-if="isFinished">
                    <img :src="articleMatched[0].imageUrl" alt="">
                </div>
            </div>
<!--            解释部分-->
            <p >{{articleMatched[0].introduction}}</p>

<!--            语音部分-->
            <div class="progress">
                <div class="progress-detail" ref="progress"></div>
            </div>
            <i ref="audio" @touchend="play"></i>
        </div>
    </div>
</template>

<script>
    import { mixins } from "@/common/mixins/assignmentMixins.js"
    // import Point from "../point.vue"
    export default {
        mixins: [mixins],
        data(){
            const articleMatched = this.item.articles.filter(item=>{return item.isMatched})   //过滤被选中命名的意象或角色
            return{
                isFinished: false,
                articleLosShow: false,
                operated: false,
                isMatchedShow: false,   //选项组
                articleMatched,     //随机被命名的意象或角色
            }
        },
        // components:{
        //     Point,
        // },
        beforeMount() {
          if(!this.item.isFinished && this.index === this.activeIndex){
              this.onEnter()
              setTimeout(()=>{
                  if(!this.item.operated) this.play()
              },3000)
          }
        },
        computed:{
            pointStyle(){
                return{
                    maxWidth: '60%',
                    marginTop: '-3rem',
                    marginLeft: '-2rem',
                    transform: 'rotate(180deg)',
                }
            },
            articleStyle(index){
                return function (index) {
                    return{
                        left: 0.5 + index * 5 + 'rem',
                    }
                }
            }
        },
        methods:{
            onEnter:function(){
                this.item.operated = false
                this.isFinished = false
                this.isMatchedShow = false
                this.articleLosShow = false
            },
            play: function () {
                this.clickMusic()
                this.updateOperated({questionIndex:this.questionIndex,param:this.index})
                this.$refs.audio.style.transform = "scale(1.2)"
                this.$refs.progress.style.width = "0%"
                this.parseTextAudio({
                    text: this.articleMatched[0].introduction,
                    start: () => {
                        setTimeout(()=>{
                            const audio = document.getElementById("parseTextAudio")
                            const time = audio.duration ? audio.duration.toFixed(2) : 5000
                            this.$refs.progress.style.transition = "all " + time + "s linear"
                            this.$refs.progress.style.width = "100%"
                            if(!this.isMatchedShow) setTimeout(()=>{this.isMatchedShow = true},time * 1000)
                        },500)
                    },
                    end: () => {
                        this.$refs.audio.style.transform = "scale(1)"
                        this.$refs.progress.style.transition = "all 0s"
                        this.$refs.progress.style.width = "0%"
                    }
                })
            },
            articleTouch: function (article,event) {
                if (this.item.isFinish || article.isLos || this.isFinished) {
                    return
                }
                this.touchMusic()
                this.operated = true
                if(article === this.articleMatched[0]) {
                    this.isFinished = true
                    this.parseTextAudio({ play: false })
                    if(this.isSeedEntery){
                        this.setSucLottiePlay()
                        setTimeout(()=>{
                            this.updateAssignmentFinish({questionIndex:this.questionIndex,param:this.index})
                        },3000)
                    }else {
                        setTimeout(()=>{
                            this.perfectMusic()
                            this.updateAssignmentFinish({questionIndex:this.questionIndex,param:this.index})
                        },3000)
                    }
                    this.addAnswer({
                        id: this.item.id,
                        type: true
                    })
                } else {
                    this.losMusic()
                    this.articleLosShow = true
                    if(this.isSeedEntery){
                        setTimeout(()=>{this.$emit('nextAssignment')},600)
                    } else {
                        this.$emit("losShow")
                    }
                    this.$set(article, 'isLos', true)
                    setTimeout(() => {this.$set(article, 'isLos', false)}, 1000)
                    this.addAnswer({
                        id: this.item.id,
                        type: false
                    })
                }
            }
        },
        watch: {
            activeIndex: function (activeIndex) {
                if (this.index === activeIndex && !this.item.isFinish) {
                    setTimeout(()=>{this.play()},5000)
                    this.onEnter()
                }
            }
        }
    }
</script>

<style scoped lang="stylus">
    @import '../../../common/stylus/content.styl'
    @import "../../../common/stylus/base.styl"
    @keyframes finishBig
        0%
            transform scale(1)
            filter none
        50%
            transform scale(1.15)
            filter drop-shadow(0px 0px 1rem rgb(254, 172, 81))
        100%
            transform scale(1)
            filter none
    .bgOpacity
        $coord('WHLT',100%,100%,0,0)
        background url($urlTitle + 'assignment/image/breakthrough/半透明背景60.png')0 0/100% 100%
    .question-contain
        position absolute
        $center('WHLT',20rem,15rem)
        margin-left -12rem
        background url($urlTitle + 'assignment/image/page20/解释框背景.png')0 0/100% 100%
        .articles-contain
            position absolute
            $center('WHLT',4rem,4rem)
            top 2rem
            margin-top 0
            background url($urlTitle + 'assignment/image/page20/未选择问号.png')0 0/100% 100%
            .article-finish
                position absolute
                $center('WHLT',3.8rem,3.8rem)
                background url($urlTitle + 'assignment/image/page20/选项框背景.png')0 0/100% 100%
                $alignCenter()
                animation finishBig 2s infinite
                img
                    min-width 30%
                    max-width 60%
                    max-height 70%
                    filter drop-shadow(2px 0px #fff) drop-shadow(-2px 0px #fff) drop-shadow(0px -2px #fff) drop-shadow(0px 2px #fff) drop-shadow(2px 2px 1px #0000004a)
        .article-options
            position absolute
            $center('WHLT',15rem,4rem)
            top 2rem
            margin-top 0
            .article
                position absolute
                width 4rem
                height 4rem
                background url($urlTitle + 'assignment/image/page20/选项框背景.png')0 0/100% 100%
                $alignCenter()
                img
                    min-width 30%
                    max-width 60%
                    max-height 70%
                    filter drop-shadow(2px 0px #fff) drop-shadow(-2px 0px #fff) drop-shadow(0px -2px #fff) drop-shadow(0px 2px #fff) drop-shadow(2px 2px 1px #0000004a)
            .losShow
                filter grayscale(1)
        p
            position absolute
            $center('WHLT',16rem,3rem)
            margin-top 0rem
            font-size 0.8rem
            text-indent 1.6rem
            color #ffa062
            line-height 1rem
            text-align left
        .progress
            $coord('WHLB', 11rem,0.6rem,2.5rem,2.2rem)
            background rgb(244, 228, 220)
            border-radius 0.3rem
            filter drop-shadow(0 0 1px rgb(244, 228, 220))
            .progress-detail
                position absolute
                height 100%
                border-radius 1vh
                left 0
                width 0%
                background rgb(253, 152, 30)
        i
            $coord('WHRB', 2rem,2rem,2.5rem,1.6rem)
            transition all 0.3s
            background url($urlTitle + 'assignment/image/page20/语音图标.png') 0 0 / 100% 100%
</style>
